<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询出来的预约结果页面</title>
    <!--引入elementui得样式-->
    <link type="text/css" rel="stylesheet" href="/css/index.css" />
    <!--引入vue得依赖必须再elementui之前引入vue-->
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>
</head>
<body>
    <div id="app">
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    prop="regId"
                    label="编号"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="user.realname"
                    label="用户姓名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="section.sectionName"
                    label="预约科室"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="admin.name"
                    label="医生姓名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="regDate"
                    label="预约时间"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="regName"
                    label="患者姓名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态"
                    width="200">
                <template slot-scope="scope">
                    <h4><span v-if="scope.row.status == 9" style="color:red;">医生还未处理改预约信息</span></h4>
                    <h4><span v-if="scope.row.status == 0" style="color: blue">该预约信息已处理</span></h4>
                    <h4><span v-if="scope.row.status == 1" style="color: gray">该预约已被拒绝</span></h4>
                </template>
            </el-table-column>
            <el-table-column  label="操作" width="300px">
                <template slot-scope="scope">
                    <el-button type="primary" @click="chakan(scope.row)" v-if="scope.row.status == 0">查看病例</el-button>
                    <el-button type="success" @click="downlow(scope.row)" v-if="scope.row.status == 0">下载病例</el-button>
                    <el-button type="primary" @click="chakan(scope.row)"  disabled v-if="scope.row.status == 9">查看病例</el-button>
                    <el-button type="success" @click="downlow(scope.row)" disabled v-if="scope.row.status == 9">下载病例</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--查看病例信息-->
        <el-dialog
                title="病历详情"
                :visible.sync="dialogVisible"
                width="80%"
                :before-close="handleClose">
            <!--病例信息-->
            <el-descriptions class="margin-top"  :column="2" :size="size" border>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-user"></i>
                        患者姓名
                    </template>
                    {{regData.regName}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        手机号
                    </template>
                    {{regData.phonenumber}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-location-outline"></i>
                        预约科室
                    </template>
                    {{regData.sectionName}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        性别
                    </template>
                    {{regData.sex}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        预约日期
                    </template>
                    {{regData.regDate}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        主治医师
                    </template>
                    {{regData.adminName}}
                </el-descriptions-item>
            </el-descriptions>
            <el-form :label-position="labelPosition"  :model="formLabelAlign">
                <el-form-item label="病情分析:">
                    <el-input   type="textarea" readonly="readonly" :rows="1" width="100%" v-model="formLabelAlign.cases"></el-input>
                </el-form-item>
                <el-form-item label="治疗意见:">
                    <el-input type="textarea" :rows="3"  readonly="readonly" width="100%"v-model="formLabelAlign.suggest"></el-input>
                </el-form-item>
            </el-form>
            <el-button type="danger" style="width: 15%;margin-left: 350px" @click="dialogVisible = false">取 消</el-button>
            <el-button type="success" style=" width: 15%;margin-right: 230px" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</body>
<script>
    var url = window.location.href
    var arr = url.split("&");
    var infoArr=[];
    var day = new Date();

    for (let i = 0; i < arr.length ; i++) {
        var a = arr[i].split("=")[1];
        console.log(a)
        infoArr[i]=a;
    }
    var app = new Vue({
        el:"#app",
        data:{
            tableData:[],
            dialogVisible:false,
            regData:{},
            regName:infoArr[0],
            idcard:infoArr[1],
            formLabelAlign:{},
        },
        created(){
            this.showTable()
        },
        methods:{
            showTable() {
                axios.post("reg/selectByRegNameAndIdcard?regName="+this.regName+"&idcard="+this.idcard).then(resp=>{
                   if (resp.data.code==200){
                       this.tableData=resp.data.data
                       console.log(this.tableData)
                       this.$message.success("查询成功");
                   }else{
                       this.$message.error("查询失败,请核对患者姓名和患者身份证号")
                   }
                })
            },
            chakan(row){
                this.dialogVisible=true;
                this.formLabelAlign=row;
                this.regData=row;
            },
            downlow(row){
                axios.post("excel/download?regId="+row.regId,{responseType: 'blob'}).then(function (resp){
                    // this.$message.success("下载成功");
                    var blob = new Blob([resp.data])
                    var downloadElement = document.createElement('a');
                    var href = window.URL.createObjectURL(blob); //创建下载的链接
                    downloadElement.href = href;
                    downloadElement.download = "病历详情表"+ day.valueOf()+".xlsx"; //下载后文件名
                    document.body.appendChild(downloadElement);
                    downloadElement.click(); //点击下载
                    document.body.removeChild(downloadElement); //下载完成移除元素
                    window.URL.revokeObjectURL(href); //释放掉blob对象
                })
            },
            // download(){
            //     axios.post("/excel/download",this.tableData,{responseType: 'blob'}).then(function (response){
            //         var blob = new Blob([response.data])
            //         var downloadElement = document.createElement('a');
            //         var href = window.URL.createObjectURL(blob); //创建下载的链接
            //         downloadElement.href = href;
            //         downloadElement.download = '医生信息.xlsx'; //下载后文件名
            //         document.body.appendChild(downloadElement);
            //         downloadElement.click(); //点击下载
            //         document.body.removeChild(downloadElement); //下载完成移除元素
            //         window.URL.revokeObjectURL(href); //释放掉blob对象
            //     })
            // },
        },
    })
</script>
</html>